<template>
  <header>
    <div class="logo">
      <div @mouseenter="slideBarOutIn(0)" @mouseleave="slideBarOutIn(1)" class="logo-image"><span></span></div>
      <div class="logo-text"><span>物联网软件平台</span></div>
    </div>
  </header>
  <div @mouseenter="slideBarOutIn(0)" @mouseleave="slideBarOutIn(1)" class="slide-bar" :class="{'slide-out' : slideOut}">
    <router-link to="/" exact-active-class="router-active">
      <div class="select-item"><span class="disaster-icon"></span><span>地质灾害监控中心</span></div>
    </router-link>
    <router-link to="/disaster/device" active-class="router-active">
      <div class="select-item"><span class="disaster-device"></span><span>多模块监测设备详情</span></div>
    </router-link>
    <router-link to="/cityPipe" active-class="router-active">
      <div class="select-item"><span class="citypipe-icon"></span><span>管廊大数据监控</span></div>
    </router-link>
  </div>
  <main>
    <router-view></router-view>
  </main>
</template>

<script setup>

import {ref} from "vue";

const slideOut = ref(false);

const slideBarOutIn = (type)=>{

  switch(type){
    case 0:
      slideOut.value = true;break
    case 1:
      slideOut.value = false;break
  }
}

</script>

<style scoped lang="less">
@header-back: #6ab2fa;
@header-border: #1453bd;
@header-text: #eafbff;
@hover-background-color-light: #b4d9ff;
@hover-background-color-dark: rgba(124, 148, 179, 0.38);
@left-bar-background-color: rgb(125, 193, 255);
@left-bar-item-active: #f3fdff;
@left-bar-item-text: #b4d9ff;

header{
  position: fixed;
  width: 100%;
  z-index: 99;
  height:  3.5rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(to right, rgb(40, 161, 239), rgb(15, 73, 149));

  .logo{
    height: inherit;
    width: 17rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .logo-image{
      height: 100%;
      width: 3.2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span{
        height: 2rem;
        width: 2rem;
        background: center/100% no-repeat url("../assets/img/menu.png");
        display: block;
      }
    }
    .logo-image:hover{
      background-color: @hover-background-color-light;
    }
    .logo-text{
      font-size: 1.6rem;
      letter-spacing: .3rem;
      font-weight: bolder;
      color: @header-text;
    }
  }
}
.slide-bar{
  height: 100vh;
  width: 14rem;
  background-color: @left-bar-background-color;
  position: absolute;
  left: -14rem;
  top: 3.5rem;
  transition: ease 0.3s;
  z-index: 99;

  a{
    color: @left-bar-item-text;
  }
  .select-item{
    height: 3rem;
    padding-left: 1rem;
    font-size: 1rem;
    letter-spacing: .1rem;
    font-family: 黑体;
    font-weight: 400;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .disaster-icon{
      width: 1.5rem;
      height: 1.5rem;
      margin-right: .7rem;
      background: no-repeat center/100% url("@/assets/img/disaster.png");
    }
    .disaster-device{
      width: 1.5rem;
      height: 1.5rem;
      margin-right: .7rem;
      background: no-repeat center/100% url("@/assets/img/device.png");
    }
    .citypipe-icon{
      width: 1.5rem;
      height: 1.5rem;
      margin-right: .7rem;
      background: no-repeat center/100% url("@/assets/img/pipe.png");
    }
  }
  div:hover{
    color:@left-bar-item-active;
    background-color: @hover-background-color-dark;
  }
  .router-active{
    color: @left-bar-item-active;
  }
}
.slide-out{
  left: 0;
}
main{
  width: 100%;
  height: 100%;

}

</style>